﻿<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>二代身份证网页读取测试</title>
  <meta charset="utf-8" />
  <style type="text/css">
  body div {
    margin-bottom: 10px;
  }
  
  .warn {
    color: red;
  }
  
  .succ {
    color: blue;
  }
  
  body form input {
    width: 200px;
  }
  </style>
  <script src="jquery.min.js"></script>
  <script src="index.js"></script>
</head>

<body>
  <h2>二代身份证网页读取测试(CertReader)</h2>
  <object id="CertCtl" TYPE="application/cert-reader" width=0 height=0></object>
  <div class="btn-group">
    <button id="btnConn">打开连接</button>
    <button id="btnGetStatus">获取连接状态</button>
    <button id="btnRead">读卡</button>
    <button id="btnClose">关闭连接</button>
  </div>
  <div>
  </div>
  <div>
    <form id="IdCard">
      <div>
        <div>
          <label>姓名：</label>
          <input type="text" id="partyName">
        </div>
        <div>
          <label>性别：</label>
          <input type="text" id="sex">
        </div>
        <div>
          <label>民族：</label>
          <input type="text" id="nation">
        </div>
        <div>
          <label>出生：</label>
          <input type="text" id="bornDay">
        </div>
        <div>
          <label>住址：</label>
          <input type="text" id="certAddress">
        </div>
        <div>
          <label>身份证号：</label>
          <input type="text" id="certNumber">
        </div>
        <div>
          <label>签发机关：</label>
          <input type="text" id="certOrg">
        </div>
        <div>
          <label>起始日期：</label>
          <input type="text" id="effDate">
        </div>
        <div>
          <label>失效日期：</label>
          <input type="text" id="expDate">
        </div>
        <div>
          <label>头像：</label>                      
          <input type="text" id="cardHimg"/>
          <img src="" alt="" id="cardHimg">
        </div>
        <div>
          <label>正面照片：</label>          
          <input type="text" id="cardFimg" />
          <img src="" alt="" id="cardFimg">
        </div>
        <div>
          <label>反面照片：</label>
          <input type="text" id="cardBimg" />
          <img src="" alt="" id="cardBimg">
        </div>
        <div>
            <label>正反面照片：</label>            
            <input type="text" id="cardAimg" />
            <img src="" alt="" id="cardAimg">
        </div>
      </div>
      <div style="clear: both;"></div>
    </form>
  </div>
  <div>
    <div style="float:left;">结果：</div>
    <div id="result"></div>
  </div>
</body>

</html>
